Greasemonkey 源码阅读 yawf

yawf 是一个 Greasemonkey 脚本，提供微博增强功能。在本文中，记录了我代码阅读过程中的心得体会。

免责声明：本文仅用于技术学习和研究目的，不鼓励或支持任何形式的滥用。如读者选择使用本文中的信息进行任何非法或不当行为，作者概不负责。

这个脚本非常庞大，完整代码有近 2w 行。是一个多文件工程，通过一个自制打包脚本，合并为最终的单文件脚本。

Util

工具类，功能：

• util
  • functools
    • once：L272，只执行一次
  • urls
    • blobToDataUrl：L300，将 Blob对象转为 Data URL
  • priority：L318
  • performance：L259，性能统计
  • debug：L399，打印 debug 日志
  • debug.setEnabled：L400，debug 日志开关
  • language：L413，语言
  • strings
    • parseint：“万”或“亿”的字串转换为数字
    • randKey：随机字符串
    • confusableHanConvert：同形汉字替换
    • normalizeConfusableHanNode
  • css
    • add：L538，添加 CSS
  • inject：L696，注入函数
  • inject.Callback：注入的回调
  • keyboard
  • i18n
  • base62
  • mid
  • crc
  • tarball：打包工具
  • time

inject

代码实现：

// 执行传入函数，连同输入参数
util.inject = function (func, ...params) {
  // 首次执行时，先执行 init
  // init 是一个 立即执行函数表达式 (IIFE)
  const setupScript = firstCall 
	  ? `(${init}(${JSON.stringify([baseKey, replyKey])}));` 
	  : ''; firstCall = false;
  // 执行传入函数
  const executeScript = setupScript + `window[${JSON.stringify(baseKey)}](${func},${serialize(params)});`;
  // 创建一个 script 节点
  const script = document.createElement('script');
  script.textContent = executeScript;
  const target = document.head || document.body || document.documentElement;
  return new Promise(resolve => {
    // 注册一个回调，运行成功后删除节点
    script.addEventListener('load', () => {
      resolve();
      script.parentElement.removeChild(script);
    });
    // 立即添加，或者等一小会儿添加
    if (target) target.appendChild(script);
    else setTimeout(function injectScript() {
      const target = document.head || document.body || document.documentElement;
      if (!target) setTimeout(injectScript, 10);
      else target.appendChild(script);
    }, 10);
  });
};
util.inject.Callback = Callback;

网络资源

• 药方 (YAWF) (greasyfork.org)

本文作者：Maeiee

本文链接：Greasemonkey 源码阅读 yawf

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！